<!--  -->
<template>
   
  <div class="sysDict">
    <!-- 工具条开始 -->
    <el-row style="margin: 30px">
      <a href="http://localhost:8081/sys/dict/export" target="_blank">
        <el-button v-if="hasAuth('sys:dict:export')" size="medium" type="primary">导出</el-button>
      </a>
      <el-divider direction="vertical"></el-divider>
      <el-button v-if="hasAuth('sys:dict:import')" size="medium" type="warning" @click="importData"
        ><i class="fa fa-plus" /> 导入</el-button
      >
      <el-dialog title="导入" :visible.sync="dialogImportVisible" width="480px">
        <el-form label-width="50px">
          <el-form-item label="文件">
            <el-upload
              drag
              :multiple="false"
              action="#"
              :before-upload="upload"
              :on-success="onUploadSuccess"
              class="upload-demo"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogImportVisible = false"> 取消 </el-button>
        </div>
      </el-dialog>
    </el-row>
    <!-- :data 数据 :load 懒加载回调 -->
            <el-table
      :data="list"
      style="width: 100%"
      row-key="id"
      border
      lazy
      :load="getChildren"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
                  <el-table-column label="名称" width="230" align="left">
                    <template slot-scope="scope">
                      <span>{{ scope.row.name }}</span>             </template
        >
                    </el-table-column
      >

                  <el-table-column label="编码" width="220">
                    <template slot-scope="{ row }">
                              {{ row.dictCode }}             </template
        >
                    </el-table-column
      >
                  <el-table-column label="值" width="230" align="left">
                    <template slot-scope="scope">
                      <span>{{ scope.row.value }}</span>             </template
        >
                    </el-table-column
      >
                  <el-table-column label="创建时间" align="center">
                    <template slot-scope="scope">
                      <span>{{ scope.row.createTime }}</span>
                      </template
        >
                    </el-table-column
      >
              </el-table
    >
    <!--  列表 结束    -->
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import dict from "@/api/dict";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      //傳輸的數據
      list: [],
      listLoading: true, //是否显示加载
      dialogImportVisible: false, //导入弹框的控制
      token:localStorage.getItem("token"), //token store中获取
      myHeaders: {
        Authorization: this.token,
        "Content-Type":"application/json;charset=utf-8"
        }, //请求头
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
      //根据id查询数据字典ID
      getDict(id) {
        //调用api 获取数据
        dict.getDictData(id).then((response) => {
          this.list = response.data.data;
        });
      },
      //获取子列表
      getChildren(tree, treeNode, resolve) {
        setTimeout(() => {
          //调用api 查询
          dict.getDictData(tree.id).then((response) => {
            resolve(response.data.data);
          });
        }, 500);
      },
      //导出全部
      exportData() {
        //调用api
        dict.exportData();
      },

      //点击导入，打开对话框，用户上传文件后，调用接口
      importData() {
        this.dialogImportVisible = true;
      },
      //上传文件
      upload(file){
        var fd = new window.FormData();
        fd.append('key',file,'fileName');
        console.log(fd)
        dict.importData(file)
        .then(res => {
          
        });
      },
      //上传成功后的回调函数
      onUploadSuccess(response, file) {
        //提示
        this.$message.info("上传成功");
        //关闭对话框
        this.dialogImportVisible = false;
        //刷新页面
        this.getDict(1);
      },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getDict(1);
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  //3.0版本弃用 beforeDestroy() {}, //生命周期 - 销毁之前
  //3.0版本弃用 destroyed() {}, //生命周期 - 销毁完成
  beforeUnmount() {}, //生命周期 - 销毁之前
  unmounted() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
</style>